<template>
  <el-container class="main-box">
    <el-main ref="Box">
      <el-scrollbar class="person_body">
      <div class="my-duty">
        <div class="box-card">
          <div class="card-head">
            <module-header content="所在部门职责" :time="department_dutyYear"/>
            <header-features :type_num="1"
                             not_clickable
                             :id="department_id"
                             v-show="department_duty_list.length"
                             :text="STATUS[department_state]"
                             :personal_eit="department_state === '0' || department_state === '2'"
                             :is_text="true"
                             :change_font="true"
                             @handleReview="handleReview"
                             @handleDepartment="handleDepartment"
                             @handleChangeFontSize="handleChangeFontSize"
            />
          </div>
          <eit-content :personal_eit="department_state === '0' || department_state === '2'"
                       router_type="duty"
                       :is_add_content="department_state === '0' || department_state === '2'"
                       :text="department_duty_list"
                       :font_size="font_change.font_size"
                       :font_family="font_change.font_family"
                       :type_content="font_change.type_content"
                       :type_on_line="0"
                       @handleAddDuty="handleAddDuty"
                       @handleDeleteDuty="handleDeleteDuty"
                       @handleEitContent="handleEitContent"
                       @AddCurrentYearDuty="AddCurrentYearDuty"
          />
        </div>
      </div>
      <div class="my-duty-list" ref="card">
        <div class="box-card" :ref="'boxCard' + index"
             v-if="default_state || index<1"
             v-for="(item,index) in department_duty_all_copy" :key="index">
          <div class="card-head ">
            <module-header content="所在部门职责" :time="item.dutyYear"/>
            <header-features :type_num="1"
                             :id="item.deptId"
                             :year="item.dutyYear"
                             :text="STATUS[item.state]" :is_text="true"
                             v-show="item.contentList.length"
                             @handleReview="handleReview"
                             @handleDepartment="handleDepartment"
            />
          </div>
          <eit-content :text="item.contentList"
                       router_type="duty"
                       :font_size="font_change.font_size"
                       :font_family="font_change.font_family"
                       :type_content="font_change.type_content" :type_on_line="1"
          />
          <div class="kong-text" v-if="!item.contentList.length">暂无内容</div>
        </div>
        <!--          时间选择器-->
        <div class="time-select-box" v-if="department_duty_all_copy.length">
          <div class="time-select-head">更多年度职责</div>
          <el-select @change="handleSelectTime"
                     v-model="time_value" multiple placeholder="请选择年份">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      </el-scrollbar>
    </el-main>
    <el-aside width="300px">
      <mail-list
        class="mail-list"
        :duty_list="duty_list"
        :float_list="float_list"
        :duty_index="1"
        router_type="duty"
        @handleManDuty="handleManDuty"
      />
    </el-aside>
    <vxe-modal class="modalBox"
               v-model="centerDialogVisible"
               :title="personage_name + '的职责'"
               width="60%" height="60%"
               show-zoom resize>
      <template v-slot>
        <div class="personage">
          <div class="personage_box" v-for="(item, index) in personageList" :key="item.id">
            <p class="text-number">{{ index + 1 }}</p>
            <p class="personage-text" v-html="item.content"></p>
          </div>
          <div v-if="!personageList.length" class="personage-text" style="line-height: 68px;">暂无内容</div>
        </div>
      </template>
    </vxe-modal>
  </el-container>
</template>

<script>

import ModuleHeader from '@/appraise/components/ModuleHeader'
import HeaderFeatures from '@/appraise/components/HeaderFeatures'
import EitContent from '@/appraise/components/EitContent'
import MailList from '@/appraise/components/MailList'
import { syncRequest } from '@/utils/httpRequet'

export default {
  name: 'Department', //部门职责
  components: {
    ModuleHeader,
    HeaderFeatures,
    EitContent,
    MailList
  },
  data() {
    return {
      STATUS: Object.freeze({
        0: '提交审核',
        1: '待审核',
        2: '已拒绝',
        3: '已通过',
      }),
      centerDialogVisible: false,
      is_handle_scroll: false,
      department_duty_list: [], //部门职责列表
      department_state: 0, //部门审核状态
      part_refuse_content: '',
      department_dutyYear: '', //部门职责年份
      dutyId:'', //部门职责唯一标识
      department_id:'',
      department_duty_all_list: [], //获取所有年份职责
      department_duty_all_copy: [], //获取所有年份职责
      personageList: [],
      personage_name: '',
      font_change: {
          font_size: 1,
          font_family: 1,
          type_content: -1
        },
      float_list: [
        {
          f_name: '我部门成员',
          is_select: false,
          is_unfold: true,
          child: []
        },
        {
          f_name: '我关注的部门',
          is_select: false,
          is_unfold: true,
          child: []
        },
        {
          f_name: '我关注的人员',
          is_select: false,
          is_unfold: true,
          child: []
        }
      ],
      duty_list: [
        { url: 'appraisegrzz', title: '个人职责' },
        { url: 'appraisebmzz', title: '部门职责' }
      ],
      is_hide: false,
      time_all_tree: [], //所有时间点
      time_tree:[],//选择时间点
      options: [], //时间选择器
      time_value: [],
      default_state: false,
    }
  },

  mounted() {
    this.init()
    this.initDeptGetAll()
  },
  methods: {
    init() {
      //获取部门今年职责
      const department_duty = syncRequest({
        url: 'deptGet',
        data: {
          deptId: '',
          year: ''
        }
      })
      if(department_duty.errorCode === '1') {
        this.department_duty_list = department_duty.data.contentList
        this.department_duty_list.forEach(res=> {
          this.$set(res,'is_eit',false)
        })
        this.dutyId = department_duty.data.dutyId
        this.department_state = department_duty.data.state
        this.part_refuse_content = this.department_state ==2?department_duty.data.refuseReason:''
        this.department_dutyYear = department_duty.data.dutyYear
        this.department_id = department_duty.data.deptId
      }else if(department_duty.errorCode === '-5') {
        this.department_duty_list = []
      }
    },
    initDeptGetAll() {
      //获取部门所有职责
      const department_duty_all = syncRequest({
        url: 'deptGetAll',
        data: {
          deptId: '',
          year: ''
        }
      })
      if(department_duty_all.errorCode === '1') {
         department_duty_all.data.forEach(res=> {
          if(res.dutyId !== this.dutyId) {
            this.department_duty_all_list.push(res)
          }
        })
        this.department_duty_all_copy = this.department_duty_all_list
        this.department_duty_all_list.forEach((res,index)=> {
          const item1 = {
            value: res.dutyYear,
            label: res.dutyYear
          }
          const item2 = {
            time: res.dutyYear,
            is_click: index == 0?true:false
          }
          this.options.push(item1)
          this.time_all_tree.push(item2)
        })
        this.time_tree = this.time_all_tree
      }else if(department_duty_all.errorCode === '-5') {
        this.department_duty_all_list = []
      }
    },
    /**
     * @name 监听滚动
     */
    orderScroll(e) {
      const val = Number(this.$refs.Box.scrollTop)
      this.is_hide = val >= 30
      if (!this.is_handle_scroll) {
        this.time_tree.forEach((item, i) => {
          const offsetTop = this.$refs[`boxCard${i}`][0].offsetTop
          if (offsetTop && val > offsetTop + this.$refs.card.offsetTop) {
            this.time_tree.forEach(res => res.is_click = false)
            this.$set(item, 'is_click', true)
          }
        })
      }
    },
    /**
     * @name 置顶
     */
    handleTop() {
      const scrollTop = this.$refs.Box.scrollTop
      if (scrollTop > 20) {
        setTimeout(() => {
          this.$refs.Box.scrollTop = scrollTop - 20
          this.handleTop()
        }, 6)
        return
      }
      this.$refs.Box.scrollTop = 0
    },
    /**
     * @name 字更改
     */
    handleChangeFontSize(e) {
      if (e.index1 == 0) {
        this.font_change.font_family = e.index2
      }
      if (e.index1 == 1) {
        this.font_change.font_size = e.index2
      }
      this.font_change.type_content = e.type
    },
    /**
     * @name 新增部门当前年份职责
     */
    AddCurrentYearDuty() {
      const current_year_duty = syncRequest({
        url: 'deptAddCurrentYearDuty',
        data: {
          deptId: '',
        }
      })
      if(current_year_duty.errorCode === '1') {
        this.dutyId = current_year_duty.data.dutyId
        this.department_dutyYear = String(new Date().getFullYear())
      }
    },
    /**
     * @name 增加职责内容
     */
    handleAddDuty(e) {
      const add_duty_content = syncRequest({
        url: 'deptAddDutyContent',
        method: 'POST',
        data: {
          dutyId: this.dutyId,
          content: e.item.content,
        }
      })
      this.handleSuccessSave(add_duty_content)
    },
    //成功回调
    handleSuccessSave(result) {
      if(result.errorCode === '1') {
        this.init()
        this.department_state = '0'
      }
    },
    /**
     * @name 编辑职责内容
     */
    handleEitContent(e) {
      const eit_duty_content = syncRequest({
        url: 'deptEditDutyContent',
        method: 'POST',
        data: {
          dutySubId: e.item.dutySubId,
          content: e.item.content,
        }
      })
      if(eit_duty_content.errorCode === '1') {
        this.$message.success({ message: '编辑成功', center: true })
      }
      this.handleSuccessSave(eit_duty_content)
    },
    /**
     * @name 删除职责
     */
    handleDeleteDuty(e) {
      const delete_duty_content = syncRequest({
        url: 'deptDelDutyContent',
        data: {
          dutySubId:e.item.dutySubId
        }
      })
      console.log(delete_duty_content)
      const errorCode = delete_duty_content.errorCode === '1'
      if(errorCode) {
        this.init()
        this.department_state = '0'
      }
      this.$message({
        message: errorCode ? '删除成功' : '删除失败',
        type: errorCode ? 'success' : 'error',
        duration: 2000,
        center: true
      })
    },
    /**
     * @name 提交审核
     */
    handleReview() {
      const submit_audit = syncRequest({
        url: 'deptSubmitAudit',
        data: {
          dutyId: this.dutyId
        }
      })
      const errorCode = submit_audit.errorCode === '1'
      if(errorCode) {
        this.department_state = '1'
        this.part_refuse_content = ''
      }
      this.$message({
        message: errorCode? '提交成功':'提交失败',
        type: errorCode?'success':'error',
        duration: 2000,
        center: true
      })
    },
    /**
     * @name 审核已提交
     */
    handleDepartment(num) {
      const content = num == 1?
        this.STATUS[this.department_state] + (this.part_refuse_content?': '+this.part_refuse_content:'')
        :this.STATUS[this.department_duty_all_copy[num-1].state] +
        (this.department_duty_all_copy[num-1].refuseReason?': '+this.department_duty_all_copy[num-1].refuseReason:'')
      this.$message({
        message: content,
        type: (num == 1 && this.part_refuse_content) || (num != 1 && this.department_duty_all_copy[num-1].refuseReason) ?
          'error' : 'success',
        duration: 2000,
        center: true
      })
    },
    /**
     * @name 人员职责
     */
    handleManDuty(e) {
      if(e.type === 0) {
        const man_duty = syncRequest({
          url: 'userGet',
          data: {
            userId: e.id,
            year: ''
          }
        })
        const errorCode = man_duty.errorCode === '1'
        if(errorCode) {
          this.personageList = man_duty.data.contentList
          this.personage_name = man_duty.data.userName
          this.centerDialogVisible = true
        }else{
          this.$message({
            message: '当年暂无职责',
            type: 'warning',
            duration: 2000,
            center: true
          })
        }
      }else{
        const department_duty = syncRequest({
          url: 'deptGet',
          data: {
            deptId: e.id,
            year: ''
          }
        })
        const errorCode = department_duty.errorCode === '1'
        if(errorCode) {
          this.personageList = department_duty.data.contentList
          this.personage_name = department_duty.data.deptName
          this.centerDialogVisible = true
        }else{
          this.$message({
            message: '当年暂无职责',
            type: 'warning',
            duration: 2000,
            center: true
          })
        }
      }
    },
    /**
     * @name 选择时间
     */
    handleSelectTime(e) {
      if(!this.time_value.length) {
        this.default_state = false
        this.time_tree = this.time_all_tree
        this.department_duty_all_copy = this.department_duty_all_list
        return
      }
      this.default_state = true
        this.time_tree = []
      this.department_duty_all_copy = []
        this.time_value.forEach((res,index)=> {
          const item = {
            time: res,
            is_click: index==0?true:false
          }
          this.time_tree.push(item)
          this.department_duty_all_list.forEach(result=> {
            if(result.dutyYear == res) {
              this.department_duty_all_copy.push(result)
            }
          })
        })
    },
    /**
     * @name 时间轴
     */
    handleTimeTree(index) {
      this.is_handle_scroll = true
      this.$refs.Box.scrollTop = this.$refs[`boxCard${index}`][0].offsetTop + this.$refs.card.offsetTop
      this.time_tree.forEach(res => res.is_click = false)
      this.time_tree[index].is_click =true
      setTimeout(()=> {
        this.is_handle_scroll = false
      },500)
    },
  }

}
</script>

<style scoped lang="scss">
.el-aside {
  background-color: #F0F0F3;
  color: #333;
  padding:0;
}
.el-main {
  background-color: #F0F0F3;
  color: #333;
}
.main-box {
  background-color: #F0F0F3;
  user-select: none;
  padding: 12px;
}
::v-deep .el-scrollbar__wrap {
  height: 100%;
  overflow-x: auto;
}
::v-deep .vxe-modal--header {
  text-align: center;
}
::v-deep .el-select {
  height: 36px;
}
::v-deep .vxe-modal--title {
  font-size: 20px;
}
.personage {
  padding: 0.5rem 1.5rem;
}
.personage-text {
  flex: 1;
  font-size: 16px;
}
::v-deep .el-input__inner {
  height: 36px !important;
}
::v-deep .el-select__tags {
  max-width: 140px !important;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
.mail-list {
  width: 100%;
  height: 100%;
}
.flex {
  display: flex;
}
.flex-1 {
  flex: 1;
}
.flex-a {
  align-items: center;
}
.my-duty {
  padding-bottom: 12px; margin-right: 12px; border-radius: 4px;
  position: relative;
}
.my-duty-list {
  margin-right: 12px; border-radius: 4px;
  position: relative;
}
.box-card {
  width: 100%;
  background-color: #FFFFFF;
  padding: 10px;
  border-radius: 4px;
}
.person_body{ width: 100%; height: 100%; }

.card-head {
  border-bottom: 1px solid rgba(0,0,0,.04);
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kong-text {
  font-size: 16px;
  padding: 10px 40px;
}
.personage_box {
  width: 100%;
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.personage_box:nth-last-child(1) {
  border-bottom: none;
}

.personage_box > p:nth-child(1) {
  width: 17px;
  height:17px;
  line-height: 17px;
  opacity: 1;
  background: #1966e2;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  margin-right: 10px;
  font-size: 13px;
  position: relative;
  top: 4px;
}
.time-select-box {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0.7rem;
  right: 19rem;
}
.time-select-head {
  font-size: 16px;
  color: #666666;
  margin-right: 18px;
}
@media screen and (min-width: 1440px) and (max-width: 1599px) {
  .time-select-box {
    display: flex;
    align-items: center;
    position: absolute;
    top: 1rem;
    right: 19rem;
  }
}
@media screen and (min-width: 1280px) and (max-width: 1439px){
  .time-select-box {
    display: flex;
    align-items: center;
    position: absolute;
    top: 1rem;
    right: 19rem;
  }
}
@media screen and (min-width: 1001px) and (max-width: 1280px) {
  .time-select-box {
    display: flex;
    align-items: center;
    position: absolute;
    top: 1.3rem;
    right: 21rem;
  }
  .time-select-head {
    display: none;
  }
}
@media (max-width: 1000px) {
  .time-select-box {
    display: none;
  }
}
@media (max-width: 1024px) {
  .time-select-head {
    font-size: 14px;
    color: #666666;
    margin-right: 18px;
  }
  .kong-text {
    font-size: 14px;
    padding: 10px 40px;
  }
  ::v-deep .vxe-modal--title {
    font-size: 18px;
  }
  .personage-text {
    flex: 1;
    font-size: 14px;
  }
  .personage_box > p:nth-child(1) {
    width: 17px;
    height:17px;
    line-height: 17px;
    opacity: 1;
    background: #1966e2;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    margin-right: 10px;
    font-size: 13px;
    position: relative;
    top: 2px;
  }
}
</style>
